<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            overflow: hidden;
            margin: 0;
        }

        #allmap {
            width: 100%;
            height: 680px;
        }

        #r-result {
            bottom: 400px;
            right: 10px;
            position: absolute;
            width: 500px;
        }

        #r-result-name {
            width: 100%;
            font-size: 16px;
        }
    </style>
    <title>异步加载地图</title>
    <script type="text/javascript"
            src="http://api.map.baidu.com/api?v=2.0&ak=ZpeN7GsQtGHMWTiPMvGdSQm6vfA6cm25"></script>

</head>
<body>
<div id="allmap"></div>
<div id="r-result"></div>
<div id="r-result-name">
    CITY:
    <select name="" id="selected" onchange="getChange()">
        <option value="石家庄">石家庄</option>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
    </select>

</div>

<script type="text/javascript">

    var map = new BMap.Map("allmap"); // 创建Map实例


    map.addControl(new BMap.MapTypeControl());   //添加地图类型控件
    //        map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
    //        map.centerAndZoom("石家庄",15);      // 初始化地图,用城市名设置地图中心点
    //        等价
    //        var point = new BMap.Point(114.528688, 38.04858); // 创建点坐标==设置地图中心点
    //        map.centerAndZoom(point, 15);


    map.centerAndZoom("石家庄", 11);      // 用城市名设置地图中心点
    //            var map = new BMap.Map("allmap");
    //            map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

    //        检索结果面板
    var local = new BMap.LocalSearch(map, {
        renderOptions: {map: map, panel: "r-result"}
    });
    local.search("领航考研");


    //        var marker = new BMap.Marker(new BMap.Point(114.528688, 38.04858)); // 创建点
    //        map.addOverlay(marker);            //增加
    //        marker.setAnimation(BMAP_ANIMATION_BOUNCE); //点跳动的动画

    //        文本标注
    //        var opts = {
    //            position : point,    // 指定文本标注所在的地理位置
    //            offset   : new BMap.Size(-60, -60)    //设置文本偏移量
    //        }
    //        var label = new BMap.Label("领航考研-科大新区", opts);  // 创建文本标注对象
    //        label.setStyle({
    //            border:"1px solid #C7C7C7",
    //            color : "#0075C7",
    //            fontSize : "12px",
    //            height : "30px",
    //            lineHeight : "30px",
    //            fontFamily:"微软雅黑"
    //        });
    //        map.addOverlay(label);
    //        添加覆盖物文字标签
    //        var marker = new BMap.Marker(point);  // 创建标注
    //        map.addOverlay(marker);              // 将标注添加到地图中
    //        var label = new BMap.Label("领航考研-科大新区", {offset: new BMap.Size(-60, -40)});
    //        label.setStyle({
    //            border: "1px solid #C7C7C7",
    //            color: "#0075C7",
    //            fontSize: "12px",
    //            height: "30px",
    //            lineHeight: "30px",
    //            fontFamily: "微软雅黑"
    //        });
    //        marker.setLabel(label);
    //        文本标注end

    map.enableScrollWheelZoom();                 //启用滚轮放大缩小

    //        关键字检索
    //        var local = new BMap.LocalSearch(map, {
    //            renderOptions:{map: map}
    //        });
    //        local.search("领航考研");
    //        检索结果面板
    //        var local = new BMap.LocalSearch(map, {
    //            renderOptions: {map: map, panel: "r-result"}
    //        });
    //        local.search("领航考研");


    function getChange() {
        var selected = document.getElementById("selected");
        var index = selected.selectedIndex;
        var value = selected.options[index].value;
        console.log(value)
        if (value != "") {
            var map = new BMap.Map("allmap");
            map.centerAndZoom(value, 11);      // 用城市名设置地图中心点
//            var map = new BMap.Map("allmap");
//            map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);

            var local = new BMap.LocalSearch(map, {
                renderOptions: {map: map, panel: "r-result"}
            });
            local.search("领航考研");
            map.enableScrollWheelZoom();
        }
//        map.enableScrollWheelZoom();                 //启用滚轮放大缩小
        //        关键字检索
//        var local = new BMap.LocalSearch(map, {
//            renderOptions:{map: map}
//        });
//        local.search("领航考研");
//        检索结果面板
//        var local = new BMap.LocalSearch(map, {
//            renderOptions: {map: map, panel: "r-result"}
//        });
//        local.search("领航考研");

    }


</script>
</body>
</html>

